JSON (JavaScript Object Notation) একটি জনপ্রিয় ডেটা ফরম্যাট যা সাধারণত সার্ভার এবং ক্লায়েন্টের মধ্যে ডেটা আদান-প্রদান করার জন্য ব্যবহৃত হয়। এটি টেক্সট ভিত্তিক এবং মানুষের জন্য পাঠযোগ্য। HTML (HyperText Markup Language) হল ওয়েব পেজ তৈরি করার জন্য ব্যবহৃত মার্কআপ ভাষা। JSON HTML ব্যবহারের মাধ্যমে, JSON ডেটা HTML পেজে প্রদর্শন বা ব্যবহার করা যেতে পারে।
আপনি JSON ডেটা HTML পেজে প্রদর্শন করতে পারেন JavaScript ব্যবহার করে। এখানে একটি উদাহরণ দেওয়া হলো, যেখানে JSON ডেটাকে HTML পেজে প্রদর্শন করা হচ্ছে।
ধরা যাক, আমাদের কাছে কিছু JSON ডেটা রয়েছে, যা আমরা HTML পেজে প্রদর্শন করতে চাই:
{
"name": "John",
"age": 30,
"city": "New York"
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Example</title>
</head>
<body>
<h1>Person Information</h1>
<div id="jsonData"></div>
<script>
// JSON ডেটা
const jsonData = `{
"name": "John",
"age": 30,
"city": "New York"
}`;
// JSON ডেটাকে JavaScript অবজেক্টে রূপান্তর করা
const person = JSON.parse(jsonData);
// HTML পেজে JSON ডেটা প্রদর্শন করা
document.getElementById("jsonData").innerHTML = `
<p>Name: ${person.name}</p>
<p>Age: ${person.age}</p>
<p>City: ${person.city}</p>
`;
</script>
</body>
</html>
এই HTML পেজটি লোড হলে, নিচের মতো একটি পেজ দেখাবে:
Person Information
Name: John
Age: 30
City: New York
JSON ডেটা থেকে HTML টেবিল তৈরি করাও সাধারণ কাজ। নিচে একটি উদাহরণ দেখানো হলো যেখানে JSON ডেটা ব্যবহার করে একটি টেবিল তৈরি করা হচ্ছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON to Table</title>
</head>
<body>
<h1>Employee Information</h1>
<table id="employeeTable" border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Department</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// JSON ডেটা
const jsonData = `[
{"name": "John", "age": 30, "department": "HR"},
{"name": "Alice", "age": 25, "department": "IT"},
{"name": "Bob", "age": 35, "department": "Finance"}
]`;
// JSON ডেটাকে JavaScript অ্যারে তে রূপান্তর করা
const employees = JSON.parse(jsonData);
// টেবিলের tbody সেকশনে ডেটা ইনসার্ট করা
let tableBody = document.querySelector("#employeeTable tbody");
employees.forEach(employee => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${employee.name}</td>
<td>${employee.age}</td>
<td>${employee.department}</td>
`;
tableBody.appendChild(row);
});
</script>
</body>
</html>
JSON.parse() ব্যবহার করে JavaScript অ্যারেতে রূপান্তরিত হয়েছে।এই HTML পেজটি লোড হলে, নিচের মতো একটি টেবিল দেখা যাবে:
| Name | Age | Department |
|---|---|---|
| John | 30 | HR |
| Alice | 25 | IT |
| Bob | 35 | Finance |
HTML পেজে JSON ডেটা প্রদর্শনের ক্ষেত্রে, আপনি JSON.stringify() ফাংশন ব্যবহার করে JSON ডেটাকে ফরম্যাট করে প্রদর্শন করতে পারেন, যাতে এটি আরও পরিষ্কারভাবে দেখানো যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Formatting</title>
</head>
<body>
<h1>Formatted JSON</h1>
<pre id="jsonData"></pre>
<script>
// JSON ডেটা
const jsonData = `{
"name": "John",
"age": 30,
"city": "New York"
}`;
// JSON ডেটাকে ফরম্যাট করা
const formattedJson = JSON.stringify(JSON.parse(jsonData), null, 4);
// HTML পেজে ফরম্যাটেড JSON প্রদর্শন করা
document.getElementById("jsonData").textContent = formattedJson;
</script>
</body>
</html>
Formatted JSON
{
"name": "John",
"age": 30,
"city": "New York"
}
এখানে, JSON.stringify() ফাংশনটি JSON ডেটাকে ফরম্যাট করে সুন্দরভাবে প্রদর্শন করছে।
JSON HTML-এ ব্যবহৃত JSON ডেটাকে HTML পেজে প্রদর্শন করতে JavaScript ব্যবহার করা হয়। JSON ডেটাকে HTML পেজে ডাইনামিকভাবে innerHTML বা textContent দিয়ে ইন্সার্ট করা সম্ভব। এছাড়া, JSON ডেটা থেকে HTML টেবিল তৈরি করতে JavaScript DOM Manipulation ব্যবহার করা হয়। JSON ডেটাকে ফরম্যাট করে প্রদর্শন করতে JSON.stringify() ফাংশনটি ব্যবহৃত হয়, যা ডেটাকে সুন্দর এবং পাঠযোগ্য আকারে রূপান্তর করে। JSON ডেটা HTML পেজে ব্যবহারকারী ইন্টারফেসের মধ্যে প্রদর্শন বা উপস্থাপন করার জন্য এটি একটি কার্যকর পদ্ধতি।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
